<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: content-box;
    }
    body {
      padding: 30px;
    }
    .slide {
      width: 300px;
      display: flex;
      flex-direction: column;
      /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); */
    }
    .slide dt {
      height: 30px;
      background: #34495e;
      color: white;
      display: flex;
      align-items: center;
      padding-left: 10px;
      cursor: pointer;
    }
    .slide dt:first-of-type {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .slide dd {
      height: 100px;
      background: #f1c40f;
      overflow: hidden;
    }
    .slide dd div {
      padding: 10px;
    }
    .slide dd:last-of-type {
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="slide s1">
    <dt>后盾人</dt>
    <dd>
      <div>houdunren.com</div>
    </dd>
    <dt>后盾人</dt>
    <dd>
      <div>hdcms.com</div>
    </dd>
    <dt>后盾人</dt>
    <dd>
      <div>hdcms.com</div>
    </dd>
  </div>
</body>
<!-- <script>
  class Animation{
    constructor(el){
      this.el = el;
      this.timeout = 5;
      this.isShow = true;
      this.defaultHeight = this.height;
    }
    hide(callback){
      this.isShow = false;
      let id = setInterval(()=>{
        if(this.height<=0){
          clearInterval(id);
          callback && callback()
          return;
        }
        this.height = this.height - 1;

      }, this.timeout)
    }
    show(callback){
      this.isShow = true;
      let id = setInterval(()=>{
        if(this.height >= this.defaultHeight){
          clearInterval(id)
          callback && callback();
          return;
        }
        this.height = this.height + 1;
      }, this.timeout)
    }
    get height(){
      return window.getComputedStyle(this.el).height.slice(0,-2)*1;
    }
    set height(height){
      this.el.style.height = height + "px";
    }
  }

  class Slide{
    constructor(el){
      this.el = document.querySelector(el)
      this.links = this.el.querySelectorAll("dt")
      this.panels = [...this.el.querySelectorAll("dd")].map(item=>new Panel(item))
      this.bind()
    }
    bind(){
      this.links.forEach((item,i)=>{
        item.addEventListener("click",()=>{
          this.action(i)
        })
      })
    }
    action(i){
      Panel.hideAll(Panel.filter(this.panels,i),()=>{
        this.panels[i].show()
      })
    }
  }

  class Panel extends Animation{
    static num = 0;
    static hideAll(items,callback){
      if(Panel.num > 0) return;
      items.forEach(item => {
        Panel.num++;
        item.hide(()=>{
          Panel.num--;
        })
      });
      callback && callback()
    }
    static filter(items,i){
      return items.filter((item,index)=> index != i)
    }
  }

  let hd = new Slide(".s1");
</script> -->
<script>
  function extend(sub,sup){
    sub.prototype = Object.create(sup.prototype);
    sub.prototype.constructor = sub;
  }
  function Animation(el){
    this.el = el;
    this.timeout = 5;
    this.isShow = true;
    this.height = window.getComputedStyle(this.el).height.slice(0,-2) * 1;
    this.defaultHeight = this.height;
  }
  Animation.prototype.show = function(callback){
    this.isShow = true;
    let id = setInterval(()=>{
      if(this.height >= this.defaultHeight){
        clearInterval(id)
        callback && callback()
        return;
      }
      this.height = this.height + 1;
      this.setHeight()
    }, this.timeout)
  }
  Animation.prototype.hide = function(callback){
    this.isShow = false;
    let id = setInterval(()=>{
      if(this.height <=0){
        clearInterval(id);
        callback && callback()
        return;
      }
      this.height = this.height - 1;
  

      this.setHeight()
    }, this.timeout)
  }
  Animation.prototype.setHeight = function(){

    this.el.style.height = this.height + "px"
  }

  function Panel(item){
    Animation.call(this,item)
  }
  extend(Panel,Animation)
  Panel.num = 0;
  Panel.hideAll = function(items,callback){
    if(Panel.num > 0) return;
    items.forEach(item=>{
      Panel.num++;
      item.hide(()=>{
        Panel.num--;
      })
    })
    callback && callback()
  }
  Panel.filter = function(items,i){
    return items.filter((item,index)=> index != i);
  }

  function Slide(el){
    this.el = document.querySelector(el)
    this.links = this.el.querySelectorAll("dt")
    this.panels = [...this.el.querySelectorAll("dd")].map(item=>new Panel(item))
    this.bind()
  }
  Slide.prototype.bind = function(){
    this.links.forEach((item,i)=>{
      item.addEventListener("click",()=>{
        this.action(i)
      })
    })
  }
  Slide.prototype.action = function(i){
    Panel.hideAll(Panel.filter(this.panels,i),()=>{
      this.panels[i].show()
    })
  }

  
  let hd = new Slide(".s1");
</script>
</html>